<template>
    <div class="jpbox">
        <div class="tab">
            <div v-for="(data, index) in typeData" :key="data.value" @click="changeType($event, index)">
                <div class="btn"
                    :style="{ 'color': data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639', 'background': data.show === true ? '#E0EFFF' : '#fff' }">
                    {{
                        data.text
                    }}
                </div>
            </div>
        </div>
        <div class="charts" v-if="typeData[1].show"
            style="overflow-y: auto;margin-bottom: 20px;display: flex;flex-direction: column;">
            <div class="baseTitle" style="margin-top: 8px;">沥青混合料类型：
                {{ formData.fMixturetype }}
            </div>
            <div style="height:250px;margin-top: 8px;">
                <multiLevelTableData :config="type_config" :dataList="lqtableData" />
            </div>
            <div class="jipeiBox">
                <!-- <div class="left"> -->
                <div class="baseTitle" style="margin-top: 8px;">通过率分析</div>
                <div class="errorMonitoring">
                    <real_timeDataCharts :commonData="passingRate"></real_timeDataCharts>
                </div>
            </div>
        </div>


        <div class="charts" v-if="typeData[0].show" style="overflow-y: auto;margin-bottom: 20px;">
            <div class="baseTitle">基本信息</div>
            <div style="height:200px">
                <publicForm ref="publicForm" lableWidth="95px" :formObj="ssformObj" :formData="formData">
                </publicForm>
            </div>
            <div class="baseTitle">材料用量</div>
            <div style="margin-top: 8px;" class="lqlevelClass">
                <tableData :config="material_config" :dataList="materialData" statusType="2" :level="level"
                    :currentRow="false" :stripe="false" />
            </div>




        </div>
    </div>
</template>
  
<script>
import real_timeDataCharts from '@/components/pitchManage/dyMonitorManage/real_timeDataCharts';
import TableData from '@/components/pitchManage/dyMonitorManage/el-tables';//主页面列表
import publicForm from "@/components/public/el-form.vue"//弹框form
import multiLevelTableData from '@/components/public/multiLevel-table';//主页面列表
import formJs from './regexDetail.js'//新增弹框配置项

import {


    getAsphaltData, // 实时监控之实时数据-详情页 主页面列表详情接口


} from "@/api/request.js";

export default {
    props: ['commonData'],
    data() {
        return {
            materialData: [],
            lqtableData: [],//沥青混合料类型： 筛孔列表
            lineList: [],// 折线信息
            passingRate: {},
            ssformObj: formJs.ssformObj,//基本数据材料详情
            table_config: formJs.table_config,
            material_config: formJs.material_config,
            type_config: formJs.type_config,
            typeData: [

                { text: "材料详情", show: true },
                { text: "级配曲线", show: false },

            ],
            formData: {},
            level: [],//预警级别
            earlyWarning: []
        };
    },
    watch: {
        commonData: {
            handler(newVal) {
                if (newVal) {
                    this.getData(newVal)

                }
            },
            immediate: true
        },

    },
    components: {
        TableData,//主页面列表
        publicForm,//弹框表格
        multiLevelTableData,
        real_timeDataCharts
        // selects,//下拉框
    },


    mounted() {
        // this.typeData[0].show = true
    },

    destroyed() {

    },
    methods: {
        changeType(e, index) {
            for (let i in this.typeData) {
                if (parseFloat(i) === index) {
                    this.typeData[i].show = true;
                    // checked = this.typeData[i].text;
                } else {
                    this.typeData[i].show = false;
                }
            }
            // this.checked = checked;

        },
        getData(data) {
            this.typeData[0].show = true
            this.typeData[1].show = false
            var requestData = {
                fId: data.fId,
                companyId: data.companyId,

            }
            this.getLqHeaderData(data.machineId)
            getAsphaltData(requestData).then((res) => {
                if (res.errcode == 0) {

                    this.formData = res.data.asphaltDischargeinfo
                    var materialList = res.data.asphaltDischargeinfo.materialList//// 物料信息
                    materialList[0]['name'] = '设计比例(%)'
                    materialList[1]['name'] = '实际比例(%)'
                    materialList[2]['name'] = '实际用量(kg)'
                    materialList[3]['name'] = '误差(%)'
                    materialList[4] = {
                        name: "",
                        show: true,
                        param0: res.data.asphaltDischargeinfo.materialList[3].warntext0,
                        param1: res.data.asphaltDischargeinfo.materialList[3].warntext1,
                        param2: res.data.asphaltDischargeinfo.materialList[3].warntext2,
                        param3: res.data.asphaltDischargeinfo.materialList[3].warntext3,
                        param4: res.data.asphaltDischargeinfo.materialList[3].warntext4,
                        param5: res.data.asphaltDischargeinfo.materialList[3].warntext5,
                        param6: res.data.asphaltDischargeinfo.materialList[3].warntext6,
                        param7: res.data.asphaltDischargeinfo.materialList[3].warntext7,

                    },
                        this.materialData = materialList
                    this.level = [//预警级别
                        "",
                        this.materialData[3].warnvalue0,
                        this.materialData[3].warnvalue1,
                        this.materialData[3].warnvalue2,
                        this.materialData[3].warnvalue3,
                        this.materialData[3].warnvalue4,
                        this.materialData[3].warnvalue5,
                        this.materialData[3].warnvalue6,
                        this.materialData[3].warnvalue7,

                    ]


                    // 沥青混合料类型： 筛孔列表
                    if (res.data.asphaltDischargeinfo.asphaltRecipe != null) {
                        var lqtableData = res.data.asphaltDischargeinfo.asphaltRecipe.linkedList
                        lqtableData[0]['dischargeDates'] = '级配上限'
                        lqtableData[1]['dischargeDates'] = '级配下限'
                        lqtableData[2]['dischargeDates'] = '级配中值'
                        lqtableData[3]['dischargeDates'] = '目标级配'
                        lqtableData[4]['dischargeDates'] = '实际级配'

                        this.lqtableData = lqtableData

                        console.log(999999, this.lqtableData);
                        // asphaltAggregate
                        // temperature
                        var lineList = res.data.asphaltDischargeinfo.asphaltRecipe.lineList// 折线信息
                        this.passingRate = {
                            lineList: lineList,
                            asphaltAggregate: res.data.asphaltAggregate,//油石比
                            temperature: res.data.temperature,//温度
                            fMixtemperature: this.formData.fMixtemperature,//拌合温度
                            fActualasphaltaggregateratio: this.formData.fActualasphaltaggregateratio,//实际油石比
                            formData: this.formData

                        }
                        // this.lineList = lineList
                    } else {
                        this.lqtableData = []
                        // this.lineList = []
                    }
                    this.$emit('loadingShow', false)


                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        getLqHeaderData(id) {
            // var aa = [];
            let params = {
                machineId: id
            }
            this.$store.dispatch('getLqCommonData/getLqCommonData', params)
            //  中使用了命名空间，所以 需要在dispatch的时候在 getDataInfo前面加上moduleName
            var that = this
            setTimeout(() => {
                that.headerData = JSON.parse(JSON.stringify(this.$store.state.getLqCommonData.dataList))

                that.material_config.thead[2].label =
                    that.headerData.fParm1;
                that.material_config.thead[3].label =
                    that.headerData.fParm2;
                that.material_config.thead[4].label =
                    that.headerData.fParm3;
                that.material_config.thead[5].label =
                    that.headerData.fParm4;
                that.material_config.thead[6].label =
                    that.headerData.fParm5;
                that.material_config.thead[7].label =
                    that.headerData.fParm6;

            }, 500)
            // this.$store.dispatch('getTree/getTree', {
            //     companyId: JSON.parse(sessionStorage.getItem("userInfo")).companyId,
            //     userId: JSON.parse(sessionStorage.getItem("userInfo")).userId
            // })
            // console.log('ssss', this.$store.state.getTree);
        },
    },
};
</script>
<style lang="less" scope>
.jpbox {
    height: 100%;
}

.tab {
    display: flex;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border-bottom: 2px solid #E4E7ED;
    padding: 0 0.16rem;

    .btn {
        margin-top: 4px;
        margin-right: 16px;
        width: 102px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;

    }
}

.charts {
    height: calc(100% - 30px);
}

.baseTitle {
    /* border: 1px solid #0c204d; */
    border-bottom: 1px solid #0c204d;

    height: 30px;
    line-height: 30px;
    position: relative;
    padding-left: 15px;

}

.baseTitle::after {
    display: block;
    content: "";
    height: 30px;
    width: 5px;
    position: absolute;
    left: 0;
    top: 0;
    background: #0c204d;
}

.jipeiBox {
    display: flex;
    flex: 1;
    display: flex;
    flex-direction: column;

    .errorMonitoring {
        flex: 1;
    }


}



.lqlevelClass .blueClass1 {
    background: #409eff !important;
    height: 30px;
}

.lqlevelClass .blueClass1 .cell,
.lqlevelClass .orangeClass1 .cell,
.lqlevelClass .redClass1 .cell {
    padding: 0 !important;
}

.lqlevelClass .blueClass1 .cell,
.lqlevelClass .blueClass1 .cell a {
    width: 100%;
    /* display: inline-block; */
    color: #fff !important;
}

.lqlevelClass .orangeClass1 {
    background: #e6a23c !important;
    height: 30px;
}

.lqlevelClass .orangeClass1 .cell,
.lqlevelClass .orangeClass1 .cell a {
    color: #fff !important;
    width: 100%;
}

.lqlevelClass .orangeClass1 .cell span {
    display: block;
    box-sizing: border-box;
}

.lqlevelClass .orangeClass1 .cell span a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.lqlevelClass .redClass1 {
    background: #f56c6c !important;
    color: #fff !important;
    height: 30px;
}

.lqlevelClass .redClass1 .cell,
.lqlevelClass .redClass1 .cell a {
    color: #fff !important;
    width: 100%;
    /* display: inline-block; */
}

.lqlevelClass .redClass1 .cell span {
    display: block;
    box-sizing: border-box;
}

.lqlevelClass .redClass1 .cell span a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.lqlevelClass .defaltClass1 {
    background: #dbe7f5 !important;
    height: 30px;
}

.lqlevelClass .el-table {
    width: 98.5% !important;
}


.lqlevelClass .blueClass1 .cell span {
    display: block;
    box-sizing: border-box;
}

.lqlevelClass .blueClass1 .cell span a {
    width: 100% !important;
    height: 100%;
    display: flex;
    justify-content: center;
}

</style>
